<!-- *@description:  -->
<!-- *@Author: Platina -->
<!-- *@Date: 2025-07-11 10:20:01 -->
<template>
    <div class="Equipment">
        <div class="EquipmentTitle">
            <div class="backG"></div>
            <div class="titleContent">
                <div class="fwb zindex999 ml23 ">
                    设备列表
                </div>
                <div class="zindex999 f16 flexCenter mr10">
                    全部
                </div>
            </div>
        </div>
        <div class="EquipmentContent">
            <div class="mainBox">
                <div class="imgBox">
                    <div class="imgTop f12 flexCenter">适合飞行</div>
                    <div class="imgMiddle">
                        <div class="imgMiddleBox">
                            <img src="/EquipmentResources/Dock2.svg">
                        </div>
                        <div class="xinghao f10">型号：M190</div>
                        <div class="imgBottom f12 flexCenter">
                            空闲中
                        </div>
                    </div>
                </div>
                <div class="commentBox">
                    <div class="commentTop">
                        <div class="commentLeft flexCenter">
                            <div class="backG"></div>
                            <div class="w100 h100 f18 zindex999 flexCenter">&nbsp;&nbsp;<span
                                    class="shenglue">开福区政务巡检</span></div>
                        </div>
                        <div class="commentRight">
                            <img src="/EquipmentResources/fly.svg">
                            <img src="/EquipmentResources/live.svg">
                            <div class="task">
                                <img src="/EquipmentResources/task.svg">
                                <div class="taskButtonTool f12">任务下发</div>
                            </div>
                        </div>
                    </div>
                    <div class="commentMiddle">
                        <div class="middleComment f14"><span>设备主体：湖南低空集团</span> </div>
                        <div class="middleComment f14"><span>区域：长沙市开福区捞刀河街道元丰坝中学</span> </div>
                    </div>
                </div>
            </div>

            <div class="mainBox">
                <div class="imgBox">
                    <div class="imgTop f12 flexCenter" style="color: #F1BB80;">不建议飞行</div>
                    <div class="imgMiddle">
                        <div class="imgMiddleBox">
                            <img src="/EquipmentResources/Dock2.svg">
                        </div>
                        <div class="xinghao f10">型号：M190</div>
                        <div class="imgBottom f12 flexCenter">
                            空闲中
                        </div>
                    </div>
                </div>
                <div class="commentBox">
                    <div class="commentTop">
                        <div class="commentLeft flexCenter">
                            <div class="backG"></div>
                            <div class="w100 h100 f18 zindex999 flexCenter">&nbsp;&nbsp;<span
                                    class="shenglue">开福区政务巡检</span>
                            </div>
                        </div>
                        <div class="commentRight">
                            <img src="/EquipmentResources/fly.svg">
                            <img src="/EquipmentResources/live.svg">
                            <div class="task">
                                <img src="/EquipmentResources/task.svg">
                                <!-- <div class="taskButtonTool f12">任务下发</div> -->
                            </div>
                        </div>
                    </div>
                    <div class="commentMiddle">
                        <div class="middleComment f14"><span>设备主体：湖南低空集团</span> </div>
                        <div class="middleComment f14"><span>区域：长沙市开福区捞刀河街道元丰坝中学</span> </div>
                    </div>
                </div>
            </div>
            <div class="mainBox">
                <div class="imgBox">
                    <div class="imgTop f12 flexCenter">适合飞行</div>
                    <div class="imgMiddle">
                        <div class="imgMiddleBox">
                            <img src="/EquipmentResources/Dock2.svg">
                        </div>
                        <div class="xinghao f10">型号：M190</div>
                        <div class="imgBottom f12 flexCenter">
                            空闲中
                        </div>
                    </div>
                </div>
                <div class="commentBox">
                    <div class="commentTop">
                        <div class="commentLeft flexCenter">
                            <div class="backG"></div>
                            <div class="w100 h100 f18 zindex999 flexCenter">&nbsp;&nbsp;<span
                                    class="shenglue">长株高速</span>
                            </div>
                        </div>
                        <div class="commentRight">
                            <img src="/EquipmentResources/fly.svg">
                            <img src="/EquipmentResources/live.svg">
                            <div class="task">
                                <img src="/EquipmentResources/task.svg">
                                <!-- <div class="taskButtonTool f12">任务下发</div> -->
                            </div>
                        </div>
                    </div>
                    <div class="commentMiddle">
                        <div class="middleComment f14"><span>设备主体：越秀集团</span> </div>
                        <div class="middleComment f14"><span>区域：长株高速仙人市收费站</span> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { } from "vue";
</script>

<style lang="scss" scoped>
.Equipment {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .ml23 {
        margin-left: 23px;
    }

    .mr10 {
        margin-right: 10px;
    }

    .h100 {
        height: 100%;
    }

    .w100 {
        width: 100%;
    }

    .f10 {
        font-size: 10px;
    }

    .f12 {
        font-size: 12px;
    }

    .f14 {
        font-size: 14px;
    }

    .f16 {
        font-size: 16px;
    }

    .f18 {
        font-size: 18px;
    }

    .f20 {
        font-size: 20px;
    }

    .f24 {
        font-size: 24px;
    }

    .fwb {
        font-weight: bold;
    }

    .zindex999 {
        z-index: 999;
    }

    .CommonImg {
        height: 100%;
    }

    .flexCenter {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flexBetween {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .EquipmentTitle {
        height: 40px;
        width: 100%;
        position: relative;
        display: flex;
        justify-content: space-between;
        margin: 0 33px;
        font-size: 24px;
        color: #fff;

        .titleContent {
            width: calc(100% - 50px);
            height: 100%;
            display: flex;
            justify-content: space-between;
        }

        .backG {
            width: 95%;
            height: 70px;
            position: absolute;
            background: url("@/assets/secondTitle/bg.svg") no-repeat center center;
            background-size: cover;
            background-size: 100% 100%;
            left: -20px;
            z-index: 9;
        }
    }

    .EquipmentContent {
        flex: 1;
        padding: 20px 40px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .mainBox {
            width: 100%;
            height: 12vh;
            color: #fff;
            display: flex;

            .imgBox {
                height: 100%;
                width: 8vh;
                display: flex;
                flex-direction: column;
                position: relative;

                .imgTop {
                    width: 100%;
                    height: 2vh;
                    background-color: #006AC0;
                    text-align: center;
                    color: #66F099;
                    position: absolute;
                }

                .imgMiddle {
                    flex: 1;
                    background: url("@/assets/secondTitle/equipmentBorder.svg") no-repeat center center;
                    background-size: cover;
                    background-size: 100% 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    position: relative;

                    .imgMiddleBox {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        position: relative;

                        img {
                            width: 7vh;
                            height: 7vh;
                            margin-bottom: 2vh;
                        }
                    }

                    .xinghao {
                        width: 100%;
                        height: 1.5vh;
                        position: absolute;
                        bottom: 4vh;
                        text-align: center;
                        color: rgba(255, 255, 255, 0.4);
                    }

                    .imgBottom {
                        position: absolute;
                        width: 100%;
                        height: 2vh;
                        background: url("@/assets/secondTitle/bg0.svg") no-repeat center center;
                        background-size: cover;
                        background-size: 100% 100%;
                        text-align: center;
                        bottom: 2vh;
                    }
                }


            }

            .commentBox {
                flex: 1;
                height: 100%;
                margin-left: 20px;
                display: flex;
                flex-direction: column;

                .commentTop {
                    width: 100%;
                    height: 36px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .commentLeft {
                        width: 45%;
                        height: 100%;
                        position: relative;

                        .shenglue {
                            width: 120px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .backG {
                            width: 110%;
                            height: 15px;
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            z-index: 9;
                            background: url("@/assets/secondTitle/titleBg.svg") no-repeat center center;
                            background-size: cover;
                            background-size: 100% 100%;
                        }
                    }

                    .commentRight {
                        width: 45%;
                        height: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .task {
                            width: 36px;
                            height: 36px;
                            position: relative;

                            .taskButtonTool {
                                width: 60px;
                                text-align: center;
                                position: absolute;
                                bottom: -15px;
                                left: -50%;
                                transform: translateX(5px);
                                color: #7AC7F8;
                            }
                        }

                        img {
                            width: 36px;
                            height: 36px;
                            cursor: pointer;
                        }
                    }
                }

                .commentMiddle {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    align-items: center;

                    .middleComment {
                        width: 100%;
                        height: 4vh;
                        display: flex;
                        justify-content: start;
                        align-items: center;

                        span {
                            width: 14vw;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }

    }
}
</style>
